<template>
  <div class="main">
    <div class="title">请扫码加入副卡</div>
    <div class="sub_main">
      <div class="qr">
        <Qr :text="text" name="副卡二维码" ref="qrCode"> </Qr>
      </div>
      <div class="tip">
        请长按保存图片
      </div>
      <div class="tip">
        点击右上角可分享链接给好友
      </div>
    </div>
  </div>
</template>
<script>
import Qr from "@/components/QrCode";
import Vue from "vue";
import { Button } from "vant";
import settings from "@/settings";
import { getEnterpriseId } from "@/utils/getEnterpriseId";
import wx from "weixin-js-sdk";

Vue.use(Button);

export default {
  components: { Qr },
  data() {
    return {
      ruleId: "",
      tempEnterpriseId: "",
      text: "",
    };
  },
  created() {
    this.tempEnterpriseId =
      this.$route.query.enterpriseId || sessionStorage.getItem("enterpriseId");
    this.ruleId = this.$route.query.ruleId;
    this.text =
      settings.baseUrl +
      this.tempEnterpriseId +
      `/subCard/return?ruleId=${this.ruleId}`;
    console.log(this.text, "text");
  },
  async mounted() {
    // 获取wx.config所需参数。
    // "onMenuShareTimeline", //  老版本的分享到朋友圈
    //     "onMenuShareAppMessage" //  老版本的分享给朋友
    this.wxconfig = await $nuxt.$store.dispatch("authen/getSdkConfigNew", {
      jsApiList: [
        "updateAppMessageShareData", // 1.4版本的 分享给朋友及QQ
        "updateTimelineShareData", // 1.4版本的分享到朋友圈及 QQ空间
      ],
      openTagList: "",
    });
    // 注入配置
    wx.config({
      // debug: this.wxconfig.debug,
      debug: this.wxconfig.debug,
      appId: this.wxconfig.appId, // 必填，公众号的唯一标识
      timestamp: this.wxconfig.timestamp, // 必填，生成签名的时间戳
      nonceStr: this.wxconfig.nonceStr, // 必填，生成签名的随机串
      signature: this.wxconfig.signature, // 必填，签名
      jsApiList: this.wxconfig.jsApiList, // 必填，需要使用的JS接口列表。
    });
    wx.ready(() => {
        // 判断当前客户端版本是否支持指定的接口
        wx.checkJsApi({
          jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
          success: (res) => {
            console.log("当前客户端可以调用哪些api：", res);
          },
        });

        console.log("分享");
        // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
        wx.updateAppMessageShareData({
          title: "加入副卡",
          desc: "扫码加入副卡",
          link:
            settings.baseUrl +
            getEnterpriseId() +
            `/subCard/return?ruleId=${this.ruleId}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl:
            "https://yftx-map.xailife.com/_nuxt/img/recommand.cf38928.png", // 分享图标，要能直接访问的链接，并且跟项目同一个域名
          success: function (res) {
            // 设置成功
            console.log(res);
          },
        });

        wx.updateTimelineShareData({
          title: "加入副卡",
          desc: "扫码加入副卡",
          link:
            settings.baseUrl +
            getEnterpriseId() +
            `/subCard/return?ruleId=${this.ruleId}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl:
            "https://yftx-map.xailife.com/_nuxt/img/recommand.cf38928.png", // 分享图标，要能直接访问的链接，并且跟项目同一个域名
          success: function (res) {
            // 设置成功
            console.log(res);
          },
        });
      });
  },
  methods: {

  },
};
</script>
<style lang="scss" scoped>
::v-deep .van-field {
  border: 2px solid #eee;
  width: 4rem;
}
.main {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.04);
  padding: 0.3rem;
  box-sizing: border-box;
  font-size: 0.3rem;
  .title {
    font-size: 0.4rem;
    text-align: center;
    font-weight: 500;
    height: 1rem;
    line-height: 1rem;
  }
  .sub_main {
    height: 50vh;
    background-color: #fff;
    border-radius: 0.2rem;
    display: flex;
    flex-direction: column;
    padding: 1rem 0.5rem;
    position: relative;
    .btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .tip{
      width: 100%;
      text-align: center;
      color: #484747;
      font-weight: normal;
    }
    .qr {
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
